Sah 1 
Apa Itu Website 


dan Mengenal Cara Kerjanya 


Website atau situs web, kini telah menjadi sesuatu yang penting di 
zaman internet ini. Jika zaman dahulu website hanya lazim dimiliki 
oleh perusahaan-perusahaan besar, kini website sudah lazim dimiliki 
oleh perorangan bahkan kadang satu orang punya lebih dari satu 
website. 


Karena itu penting sekali bagi Anda untuk mengetahui apa itu 
website, bagaimana cara kerja website hingga bisa menampilkan 
halaman yang bisa dilihat di browser dan digunakan untuk banyak 
keperluan, seperti menampilkan informasi, berbelanja online hingga 
narsis via social media. 


Website punya berbagai variasi. Tapi apa pun jenisnya, website 
selalu punya satu ciri, yaitu terdiri atas halaman-halaman web/web 
pages. Mengenai jumlah webpage, tiap website berbeda-beda, 
tergantung pada kebutuhan. Ada yang bisa dihitung dengan jari, 
hingga yang ratusan atau ribuan halaman bahkan lebih dari itu. 


Saat membuat website, biasanya web master membuat halaman web 
satu demi satu, baik secara manual ataupun menggunakan software 
manajemen konten. Di bab pertama ini, Anda akan mengenal apa itu 
website dan cara kerjanya. 


1.1 Apa Itu Website 


Website adalah kumpulan halaman web yang diletakkan dalam satu 
tempat/site/situs. Jadi, di dalam website terdapat halaman-halaman 


web, beserta file-file pendukungnya, seperti gambar, video, animasi, 
dan file-file digital lain yang diletakkan dalam satu tempat yang 
diidentifikasi melalui nama domain (domain name) dan alamat ip (IP 
address). 


Nantinya website di-host/diletakkan di minimal satu web server. 
Untuk mengakses webserver, diperlukan koneksi internet, atau 
koneksi intranet (untuk web server lokal di jaringan). Jadi, komputer 
pengakses (client) mengakses komputer tempat terletaknya web 
server (server) dan kemudian mengakses halaman-halaman web 
tersebut. 


Komputer server ini biasanya speknya lebih tinggi dibandingkan 
komputer biasa karena komputer server ini biasanya memberikan 
layanan/service web kepada client. Karena itulah harus punya 
sumber daya yang lebih besar dibandingkan dengan komputer biasa. 





Gambar 1.1 Contoh komputer server dalam bentuk rak 


Sebuah halaman web lazim disebut dokumen. Dokumen ini bisa 
dibuat oleh tool apa pun yang mendukung kegiatan scripting. Ini 
karena dokumen web menggunakan prinsip terbuka. Dokumen 
halaman web ini ditulis dalam bentuk plain text/teks murni. 


Aturan pemformatan dokumen halaman web ini mematuhi aturan 
HTML Hypertext Markup Language (HTML) yang kemudian disem- 
purnakan dengan paradigma XML (Extensible Markup Language) 
menjadi XHTML (Extensible Hypertext Markup Language). 
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Gambar 1.2 Intype, salah satu software text editor 


Untuk mentransfer dokumen halaman web ke client, digunakan 
teknologi protokol HTTP (HyperText Transfer Protocol). Protokol 
HTTP ini juga dapat ditingkatkan keamanannya menggunakan 
enkripsi sehingga menjadi HTTPS yang memungkinkan halaman 
website dipakai untuk aplikasi-aplikasi yang memerlukan keamanan 
lebih tinggi, seperti e-commerce ataupun online banking. 


Untuk mengakses halaman web, komputer user harus memiliki 
software yang disebut browser. Website-website yang ada di seluruh 
dunia ini membentuk suatu “dunia maya” yang disebut World Wide 
Web dan sering disingkat sebagai WWW. 


Untuk mengakses sebuah website, diperlukan alamat penentu lokasi 
website tersebut. Jadi, browser nanti membuka website sesuai 
dengan alamat yang berlaku. Jika website dengan alamat tersebut 
ada, maka halaman sesuai dengan url yang bersangkutan akan 
dibuka. Alamat dari website atau webpage ini disebut sebagai URL 
yang merupakan singkatan dari Uniform Resource Locator. Bagian 
domain utama dari url website disebut homepage. 
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Gambar 1.3 Tampilan browser ketika membuat website dengan alamat 
domain name - koprol.com 


Untuk menuju ke halaman-halaman webpage lain di sebuah website, 
homepage dari website tersebut biasanya memberi menu navigasi 
yang memungkinkan pengunjung lebih mudah menuju ke bagian- 
bagian tertentu dari website. Menu navigasi ini juga memungkinkan 
pengunjung mengenal struktur website dengan lebih baik. 


Umumnya, setiap pengunjung website bisa mengakses semua 
bagian dari website tersebut. Kecuali beberapa bagian yang diset 
untuk administrator atau orang yang terotorisasi. Bagian khusus 
admin atau yang terotorisasi ini biasanya mensyaratkan username 
dan password untuk login ke dalamnya. Contoh situs yang 
memerlukan otorisasi misalnya situs bisnis, situs berita, situs 
akademis, situs gaming, situs forum, bulletin board, webmail, situs 
social networking, dan sebagainya. 


1.1.1 Mengenal Tipe Web Page 


Ditinjau dari cara kerjanya, tipe webpage ada dua, yaitu statis dan 
dinamis. Apa perbedaannya? Webpage statis adalah webpage yang 
halamannya selalu memiliki tampilan yang sama, saat diakses oleh 
bermacam-macam user. Di samping itu, web page statis, pemro- 
sesannya dari server juga langsung, tanpa mengalami parsing. 


Adapun webpage dinamis bisa menghasilkan tampilan yang 
berbeda-beda tergantung pada kondisi user atau kondisi server. 
Tampilan statis memungkinkan informasi yang ditampilkan kepada 
user selalu sama karena tidak berubah/statis. Secara konteks, isi 
dokumen selalu sama. 


Teknik statis ini lebih kuno, namun webpage statis juga memiliki 
kelebihan dibandingkan dengan yang dinamis, antara lain: 


1. Mudah dan cepat diimplementasikan, bahkan oleh orang yang 
baru pertama kali membuat website. 


2. Tersedia banyak software yang memungkinkan pembuatan 
website statis secara cepat. Dengan secepat kilat, Anda dapat 
membuat website dengan mudah. 


3. Cocok digunakan untuk mendemokan bagaimana cara kerja 
website dan webpage. 


4. Cocok disimpan di cache komputer klien, karena isinya akan 
selalu sama. 


Namun, halaman statis juga memiliki beberapa kekurangan. Berikut 
ini beberapa kekurangan tipe halaman web statis: 


1. Menyulitkan maintenance jika ukuran website sangat besar. 


2. Sulit untuk membuat webpage terkesan up to date. Karena jika 
ingin meng-update tampilan setiap hari, maka Anda juga harus 
membuat halaman web yang baru setiap hari. 


3. Kostumisasi ke pengunjung kurang terakomodatif, karena 
kostumisasi ini memerlukan script dinamis jenis client side. Jadi, 
tampilan untuk semua user akan sama. 


Website dinamis sepertinya memang cenderung lebih banyak digu- 
nakan sekarang ini. Namun, pasti ada kelebihan webpage statis yang 
menyebabkan website ini tetap juga ramai digunakan hingga 


sekarang. Keunggulan utama adalah loading kontennya tidak me- 
makan banyak resource sehingga performa loadingnya bagus, cepat 
dimuati di browser, jauh lebih cepat dibandingkan halaman dinamis. 
Bahkan beberapa web server seperti Apache dioptimalkan untuk 
meng-host webpage statis. 


Pernah suatu ketika, situs ubuntu.com dibuat menggunakan CMS 
yang merupakan situs dinamis. Ketika rilis ubuntu baru dikeluarkan, 
maka situs ubuntu menjadi hang, karena banyaknya akses ke situs 
tersebut yang berbasis dinamis. Namun semenjak dikembalikan ke 
webpage statis, maka masalah tersebut langsung tidak dihadapi. 


Selain itu, halaman web statis akan lebih bisa diandalkanyreliable. 
Halaman web statis tidak memerlukan pengaturan yang terlalu 
banyak, bahkan web server saja sudah bisa menjalankan webpage 
statis. Beda kalau webpage dinamis, harus ada server, lalu ada 
software untuk mem-parsing halaman tersebut dan sebagainya. Jika 
pengaturan salah, bisa-bisa tampilan webpage dinamis menjadi error. 


Jadi, webpage statis ada keunggulan dan kekurangannya. Dan 
webpage statis tidak bisa mengakomodasi semua kebutuhan. Jika 
informasi yang akan Anda sampaikan di webpage kecende- 
rungannya tidak berubah dalam jangka waktu yang lama, maka 
gunakan tipe halaman web statis. 


Tipe webpage yang kedua adalah tipe dinamis. Webpage dinamis 
dinamakan dinamis karena bersifat “bisa berubah”. Yaitu tampilan di 
website berubah tergantung pada perilaku client ataupun server. 
Konten yang ditampilkan akan berubah merespon konteks dan 
kondisi tertentu. 


Ada dua versi pembuatan webpage dinamis, yaitu: 


1. Menggunakan bahasa scripting client side untuk mengatur 
perilaku dari bagian-bagian tertentu di webpage, yang nantinya 
akan merespon input ataupun keyboard ataupun mouse yang 
digerakkan oleh user. 


Scripting ini dinamakan client side, karena perilaku user sebagai 
client di browsernya langsung ditangkap dan direspon tanpa 
harus diproses di server. Contoh bahasa pemrograman client 
side adalah javascript dan vbscript/asp script. 


2. Menggunakan bahasa scripting server side untuk mengubah 
source code yang ditampilkan sehingga memungkinkan web- 
page memiliki tampilan yang berbeda-beda tergantung pada 
hasil pengolahan kode program aslinya di server yang telah di- 
parsing oleh software parser di server tersebut. Contoh bahasa 
pemrograman server side adalah PHP, ASP.NET, Coldfusion, 
Java server pages dan sebagainya. 


Kedua teknik di atas akan bisa menghasilkan tampilan yang dinamis, 
yaitu yang bisa berubah dan adaptif. Dan kedua teknik tersebut bisa 
dipakai secara bersamaan. Jadi, tidak harus client saja atau server 
saja, namun Anda juga bisa membuat halaman web dinamis yang 
mengakomodasi client dan server. 


Untuk memakai scripting client side, halaman web harus meng- 
gunakan teknologi yang disebut bahasa pemrograman client-side. 
Bahasa pemrograman client side ini bisa dipakai untuk membuat 
antarmuka yang lebih kaya. Contoh bahasa pemrograman client side 
ini antara lain JavaScript dan ActionScript yang lazim digunakan 
untuk memberi efek Dynamic HTML (DHTML) di halaman web dan 
Flash. 


Scripting client side sekarang juga bisa digabung dengan server-side 
untuk menghadirkan halaman yang interaktif, namun memung- 
kinkan pengaksesan data di server yang sering disebut remote 
scripting atau istilah modern-nya Ajax. 


Adapun halaman web dinamis server side biasanya menggunakan 
bahasa pemrograman server-side seperti PHP, Perl, ASP, ASP.NET, 
JSP, ColdFusion Ruby on Rails, dan sebagainya. 


Bahasa-bahasa ini biasanya menggunakan CGI yang merupakan 
singkatan dari Common Gateway Interface untuk menghasilkan 
halaman web dinamis. Tipe halaman dinamis yang client side 
merupakan tipe halaman dinamis, di mana interaktivitas atau 
kedinamisan ini diakibatkan kode yang diakses oleh browser dan 
disimpan di komputer klien. 


Jadi, browser yang digunakan untuk membuka halaman mengambil 
halaman dari server, lalu memproses kode yang terdapat di halaman 
tersebut. Dan mengeksekusi kode tersebut sehingga ada perubahan 
tampilan sesuai yang diinginkan di server. 


1.2 Cara Kerja dan Jenis Website 


Agar bisa memahami cara kerja web, Anda harus mengetahui istilah- 
istilah dunia web. 
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HTML - HTML singkatan dari HyperText Markup Language. 
"markup language" adalah bahasa komputer yang menentukan 
bagaimana page harus diformat. Jika Anda ingin menampilkan 
teks dengan tulisan biasa, maka Anda tidak perlu HTML, tapi 
jika Anda ingin mengatur teks dengan font tertentu, warna 
tertentu, membuat headline, dan memasang gambar, maka 
Anda perlu menggunakan HTML yang merupakan bahasa untuk 
mengatur ini semua. 


Web browser - Web browser seperti Google Chrome, Mozilla 
Firefox atau Microsoft Internet Explorer, adalah program 
komputer yang melakukan dua hal. Pertama adalah pergi ke 
webserver di internet kemudian meminta (reguest) halaman web, 
sehingga halaman web ini bisa ada di komputer Anda. Kedua, 
web browser menginterpretasikan tag HTML di halaman untuk 
menampilkan halaman web sebagaimana yang dikehendaki oleh 
pembuat atau desainer halaman web itu. 


Web server - Web server adalah software komputer yang 
merespon permintaan webpage dari browser dan kemudian 
memberikan apa yang diminta oleh browser tersebut melalui 
internet. Web server ini mirip dengan rumah susun, di mana di 
tiap rumah meng-host webpage-webpage tertentu. Agar web- 
page bisa di-host di sana, maka harus membayar biaya bulanan. 
Jadi, webserver ini adalah tempat kost atau kontrakan dari 
webpage. Pemilik kontrakan inilah yang disebut host dan istilah 
perkontrakan ini yang disebut hosting. 


Tapi kalau Anda membuat halaman web yang statis, Anda bisa 
mencoba-coba membuat halaman web tanpa harus menggunakan 
web server, alias di file komputer Anda sendiri. 


1.2.1 Cara Kerja Client - Server 


Adapun konten server-side lebih sedikit kompleks cara kerjanya. 
Terdiri atas beberapa tahapan berikut: 


1. Klien mengirimkan permintaan ke server. 


2. Server menerima permintaan tersebut kemudian memproses 
script server side sesuai bahasa pemrograman yang diinginkan. 
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Gambar 1.4 Cara kerja bahasa pemrograman server side dalam 
memproses web berbasis server 


Variasi ketiga adalah perpaduan antara scripting server dan scripting 
client. Variasi teknik ini memiliki implementasi terbaru yang disebut 
Ajax yang merupakan singkatan dari asynchronuous javascript and 
xml. Ajax bisa dipakai untuk mengembangkan konten yang bisa di- 
update secara dinamis menggunakan kode client side, namun 
memanfaatkan data yang ada di server. 


Dengan Ajax, webpage bisa meng-update konten di dalamnya tanpa 
melakukan reload atau refresh halaman web. Contoh aplikasi yang 
menggunakan ajax ini antara lain berbagai layanan google, seperti 
Google Maps, Google Docs, dan sebagainya. Di samping itu, hampir 
semua raksasa IT menggunakan layanan ini, seperti Yahoo, 
Facebook dan Microsoft. 


Berbagai bahasa pemrograman web seperti JSP, PHP, Perl, ASP, 
Yuma dan Cold Fusion juga memiliki kemampuan mengembangkan 
web dinamis. Metode dinamis lain adalah metode sinkronisasi melalui 
sindikasi. Dengan sindikasi melalui RSS (rich side syndication) atau 
format lain berbasis XML, sebuah website dapat men-sindikasi isi 


website lain secara dinamis. Jadi, jika konten sumber feed tersebut 
di-update, sindikasi juga langsung ter-update. 


Jika menggunakan teknologi tambahan seperti flash, maka untuk 
menghadirkan aspek “dinamisme” tersebut, perlu ditambahkan 
software add-ons di browser. Misalnya di Firefox memerlukan add- 
ons flash viewer yang memungkinkan konten-konten interaktif dan 
dinamis dari flash dilihat dengan benar dari firefox. 


Selain itu ada lagi teknologi lain, seperti Microsoft Silverlight, Adobe 
Flash, Adobe Shockwave, Java, dan sebagainya. Contoh aspek 
dinamis lagi adalah dalam pembuatan iklan untuk website, seperti 
kode iklan dari google Adsense atau dari software periklanan seperti 
Openx/PHPAdsNew. 


1.2.2 Jenis Website 


Semakin berkembangnya internet, juga membuat jenis website yang 
muncul makin baragam. Jika dahulu website cuma sekadar brosur 
pasif menampilkan informasi teks dengan sedikit gambar, kini 
website bahkan bisa dijadikan tempat gaul dan sosialisasi. Apa saja 
jenis website? Berikut ini beberapa jenis website di zaman sekarang 
ini. 


1. Website Affiliate: Portal yang tidak sekadar berupa CMS, namun 
juga bisa men-sindikasi konten dari pihak ketiga. Contohnya 
Yahoo! dan Ebay. 


2. Website arsip, website ini menyimpan informasi-informasi 
penting di internet. Jadi, fungsinya mirip dengan perpustakaan 
online yang menyimpan hal-hal penting dan menarik di internet. 
Contohnya Internet Archive (archive.org) yang menyimpan 
triliunan halaman web, serta google groups yang mengumpulkan 
data-data lama dari forum usenet. 
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Gambar 1.5 Archive.org, website arsip yang menyimpan banyak 
informasi di internet 


3. Website blog: Digunakan untuk menyimpan informasi yang 
dimiliki oleh seorang individu atau perusahaan dan memung- 
kinkan informasi tersebut diberi komentar oleh pengunjung. 
Contoh penyedia website blog ini misalnya blogdetik.com dan 
kompasiana.com. 
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Gambar 1.6 Kompasiana.com, salah satu penyedia blog yang cukup 
populer serta simpel dan mudah pengoperasiannya 


4. Website konten: Website yang menawarkan informasi yang 
berguna ke pembacanya. Misalnya Slate.com atau About.com. 
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Gambar 1.7 About.com, salah satu contoh website konten yang berisi 
banyak informasi menarik yang ditulis oleh para ahli 


5. Website korporat: Website yang dimiliki oleh perusahaan, dan 
digunakan untuk menyampaikan informasi-informasi dalam 


berbagai aspek yang dimiliki oleh perusahaan atau organisasi 
tersebut. 


6. Website e-commerce: Sering juga disebut website toko online 
yang memungkinkan terjadinya transaksi barang dan jasa 
melalui website tersebut. 
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Gambar 1.8 Contoh toko online yang dibangun menggunakan 
oscommerce gramediaonline.com 


Situs komunitas dan social media: Tempat mangkal dan 
berkumpulnya orang-orang yang ingin bersosialisasi melalui 
pembentukan sebuah komunitas. Di situs ini, user dapat saling 
bertukar informasi dan membentuk group-group untuk ber- 
sosialisasi. Contohnya yang paling beken adalah Facebook. 
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Gambar 1.9 Facebook, situs komunitas paling beken sekarang ini 
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Website pemerintahan: Ini adalah sejenis corporate website 
namun yang dimiliki oleh institusi pemerintahan. Isinya me- 
ngenai dunia birokrasi dan kemajuan-kemajuan yang sudah 
dilakukan oleh institusi tersebut. Misalnya http://semarang.go.id 
atau http://polri.go.id. 
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Gambar 1.10 Homepage dari situs resmi kota Semarang 


Forum: Tempat anggota-anggota yang terdaftar di forum untuk 
mendiskusikan berbagai topik yang memungkinkan user saling 
berbagi informasi. Misalnya http://kaskus.com, 
http://forum.detik.com dan sebagainya. 








@ kaskus - The Largest Indonesian Community - Mozilla Firetor”— 










TOTAL POSTS: Totat memeers: | MEKNN 7 


H 
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8 Alasan Mengapa 
& Jangan Biasakan  Membungkuk B ain Tak tau Sakit 
' Info Arus Mudik 2011 











"8 THREADS FORUM TERKINI THREADS JUAL/BELI TERKINI 



































Gambar 1.11 Website forum dari Kaskus.us 


10. Website humor: Menampilkan cerita-cerita atau gambar lucu 


yang bertujuan untuk menghibur. 


11. Website informasi: Menampilkan informasi-informasi kepada 
user, ada yang bersifat komersil dan ada juga yang nirlaba. 
Misalnya http://kamus.itb.ac.id atau http://wikipedia.org. 


12. 


13. 


14. 


15. 























(@ Wikipedia bahasa Indonesia, ensiklopedia bebas - Mozilla Firefox lela 
Berkas Edit Tampilan Riwayat Markah Alat Bantuan 
| Wo wikipedia bahasa Indonesia, ensiklopedi... | st | 
| 
K3 WW. http://id.wikipedia.org/wiki/Halaman Utama (JIE | Pj 
IA Pa £ ae — — —LS 
| @& Masuklog/buatakun 4 
3 Utama 
4 Pembicaraan Baca | Lihat sumber | Versi terdahulu | | Cari as 
& 
| Selamat datang di Wikipedia bahasa Indonesia, ensiklopedia bebas berbahasa Indonesia 
| Saatini ada 171.705 artikel dengan 285.619 pengguna terdaftar 
Halaman Utama Carijudul || Cariisi 
Perubahan terbaru Ma SATA 
» Memulai - Menjelajahi - Menyunting - Mendaftar - Komunitas - Warung kopi - Bantuan 
Peristiwa terkini 
You dont speak Indonesian? 
Halaman sembarang 
” Komunitas @ » - 
“ Ti 5 2 F 4 ra 
Warung Kopi (73 @ & . tuj yx @ 3) $ an 
Portal komunitas Budaya Filsafat Geografi Ilmu Indonesia Masyarakat Matematika Sejarah Seni Teknologi Tokoh 
Bantuan Tana Ta -a 
13 Artikel pilihan sunting “0 Peristiwa terkini sunting 
» Wikipedia 
Ran, Rancangan Malaysia Kedua adalah rencana » Yoshihiko Noda (foto) terpilih sebagai 
? Cetakleksi 
Sisa 91 pengembangan ekonomi yang diterapkan oleh pemerintah — Perdana Menteri ke-62 Jepang 2 
Peralatan Malaysia dengan tujuan menjalankan Kebijakan Ekonomi — « Aktivis sipil India Anna Hazare mengakhiri 
aa Baru Malaysia. Rencana ini diterapkan tahun 1971 hingga 12 hari puasanya setelah Parlemen India 
ea Mo 1975, bertujuan "merestrukturisasi" masyarakat Malaysia mengadopsi sebuah resolusi untuk 
| dan mengurangi dominasi orang Cina dan asing dalam meloloskan suatu undang-undang ombudsman yang d 
kz K3 

















Gambar 1.12 Website wikipedia, ensiklopedia online 


Situs aplikasi: Situs yang digunakan untuk menjalankan sebuah 
aplikasi, misalnya google docs atau situs-situs yang memakai 


applet java. 


Website mirror: 


Yaitu website yang menampilkan salinan 


komplet dari website lain. Misalnya sourceforge.net yang punya 
banyak mirror untuk mendistribusikan beban download-nya. 


Website berita: 


Menampilkan berita-berita 


terkini, seperti 


http://detiknews.com, http://tvone.co.id, http://kompas.com dan 
lain sebagainya. Beberapa situs berita juga memungkinkan 
pengakomodasian komentar oleh pengunjung. 


Website pribadi: Website yang dimiliki oleh perorangan. Ini bisa 
berisi tentang semua hal berkaitan dengan kehidupan seseorang. 
Blog kadang juga bisa digolongkan sebagai bagian dari website 


pribadi. 
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16. 


17. 


18. 











& KOMPAS.com - Mozila Fretox WAN Sis 
Berkas Edit Tampilan Riwayat Markah Alai 
| @ kompas.com 

@ hitp://kompas.com/ Teja cos ai 
& p//komo. 3 


Selamat Datang” Muhammad Thamrin ihs5: wb 


KOMPAS.com 


KOMPAS.com 


Home Nasional Regional Internasional Megapolitan Bisnis& Keuangan Olahraga Sains Travel Oase Edukasi Grafis More w 


BREAKING NEWS - Limbangan-Nagreg Satu Arah 


LIPSUS KOMPAS. he 2 Yg @ PETA MUDIK 
Se Ma KEK Ie ) 2011 
Berniat : : 3) 


2 @VIZ RAMADHAN 


1 5 12 

- 
C ea Na 
Dug Jiwa : R 








Klik di sini 









































Terkini Terpopuler Terkomentari 


Anyer.Cilegon Juga Macet 





http://ramadhan.kompas.com/ n from 1st 


55 Nge — 

















Gambar 1.13 Kompas.com, salah stu website news di Indonesia 


Website phising: Ini adalah website tipu-tipu yang digunakan 
untuk menipu orang lain. Misalnya mencuri informasi password, 
dan nomor kartu kredit dengan membuat website yang tam- 
pilannya mirip dengan tampilan asli namun berbeda. Contohnya 
dulu ada website yang mencontoh klikbca.com. 


Website politik: Sebuah website yang membahas dan mengana- 
lisa seputar politik. Contohnya politikana.com. 


Website review: Website di mana ditampilkan produk-produk 
beserta penjelasannya, dan pengunjung atau user yang sudah 
terdaftar bisa me-review produk atau layanan tersebut. 





@ tngadget - Mosila Firetox , 5... 2 


Berkas Edit Tampilan Riwayat Markah Alat Bantuan 




















| O tngndaet Ll — 
« http:/Jww.engadget.com/ g Plt 
Aol Tech. -| 





UPDATED 
" ATAOL.COM 





Aol. | mar 


BlackBerry Unleashed 


Reviews of three similar but very 
different BlackBerry handsets. 











BlackBerry 
Bold 9930 





BlackBerry 
Torch 9850 





BlackBerry 
Torch 9810 


NEWS | HuBs | GALLERIES | VIDEOS | PODCASTS | TOPICS | REVIEWS le) 1. Ds o mPus 


@ Jumpto the latest posts 


Tadlink/5113/948358/0/..93304084:kstid-1763guul onmdt0:kvseg-92099-: MENEK-aNNNNN: NYA, | - 























Gambar 1.14 Situs Engadget.com yang berisi review tentang gadget 
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19. Website sekolah: Situs milik sekolah, yang mengakomodasi 
informasi-informasi seputar sekolah di Indonesia. Ekstensi situs 
ini adalah .sch.id. 





(@ SMAN 3 SEMARANG - Mozila Firefox 8. MWA NG MANA Sa) 
Berkas Edit Tampilan Riwayat Markah Alat Bantuan MM 


| Oi sman3 SeMARANG Ka a — 


LI) http://sman3-smg.sch.id/id1/ sej 








8 -sma semarang P 





Selamat Idul Fitri 1432 H Mohon Maaf lahir & Batin - 


#engisn Jawa € septemter2o11 


Main Menu 
MR Home 


Menu Sekolah 21 22 23 2 











Kesiswaan . sd 28 29 30 
News LAN 3 Se ca) 21 Nis 
Sudut TRRC 
ai 
Unduh News 
H Keluarga Besar SMA Negeri 3 
Galeri an Salamat Idul Fitri 1429 H..mahan. Login £ 
- ce) 








Gambar 1.15 Fasilitas e-learning dari situs sebuah sekolah 


20. Situs social bookmark: Tempat untuk mem-bookmark alamat 


webpage tertentu dan biasanya dilengkapi dengan fasilitas rating 
dan komentar. 





(@ Digg - All Topics - The Latest News Headlines, Videos and Images - Mozilla Firefox aa 
Berkas Edit Tampilan Riwayat Markah Alat Bantuan 


| Ooigg - At Topics - The Latest News Hea.. ak 


€ j3 ID http4//digg.comv/ 








-|G||$- sma semarang 2) All 
| 


Higg» (BEKEKER ar hove —TooNons Movie TN . 


AllTopics Business — Entertainment — Gaming — Lifestyle — Offbeat — Politics — Science 








Sports — Technology — Worid News 


| Top News ost Recent All Stories 
When Actors Commit Too Much to Their Roles 


blogs.miamineu m — Actors confusing their film roles with their real ifein avery  Mikmgu 
Diggt| Serious affiction fo 7 PX 
at 0121 lpove X5 


Were Lost iPhone 5 Investigators Impersonating San 
86 Francisco Police? ne 


Diggt| 9izmodo.com — According to the SF Weekly, investigators looking into the missing 
iPhone 5 may have been impersonating San Francisco police officers. That's ... 7 m 











ngofheart H1 Cot 





$50 can provide food & 
shelter for one person. 


ktopez 1911 Commer 242 di Save X Bu 
Who Is the Sexiest Woman of the Summer: Mila Kunis or G 
50 Olivia Wilde? (GALLERY) 




















Gambar 1.16 Website bookmarking dengan digg 
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21. Website video sharing: Di mana user dapat meng-upload video 
ke website dan kemudian website melakukan pemrosesan video 
dan mengonversinya ke format flash video (.flv) untuk kemudian 
pengunjung dapat melihat video tersebut dengan gratis. Contoh 
website tipe ini adalah YouTube dan Google Video. 





(D 720p Video taken from IDEOS X5” YouTube - Mori Firetor lola an 








2 hhttp://wwwyoutube.com/watch?v- UG9p9X95!rskfeature-grec.indi 5 G|I ag ideos 1s 2)» 
(J2 Ilih htps//mumyoutubecom/watchiv-UGOpgOSIBfeature-grecindex)o”o””””””””)js5-iafidihidons OP 
3 
You MTI Telusuri | Jelajah | Unggah Buat Akun | Masuk 


720p Video taken from IDEOS X5 


phonedaily 2.079 video &) | Langgan 






Huawei IDEOS U8800 X5 


| Sora 
unboxing and guick previe. 
B 
222 co Unggulan 
H Huawei x5 (U8800) 
P3 Camera/Video Test 
huawei x5 in asphalt5 oyun 
performansi 
ai en 


Nokia N8 vs. Huawei U8800 
(deos X5) - Video Test 




















FN Hiasi loo x 6600 oo 
& 














Gambar 1.17 Youtube.com untuk video sharing 


22. Website search engine: Digunakan untuk mencari informasi di 
internet. Website search engine ini memungkinkan pengunjung 
mencari informasi dengan memasukkan kata kunci pencarian. 
Biasanya search engine mendukung pencarian teks, gambar, 
video dan sebagainya. Contohnya Google dan Yahoo! 












































D Soogle - Motia Firefox , . -... —haees 
SC, 
Penetusuran Gooote | | saya Lagi Beruntung 
Google.co.id tersedia dalam: English Basa Jawa 
Program Periklanan | Serba-serbi Google | Google.com in English Ganti gambar latar - 




















Gambar 1.18 Google, salah satu mesin pencari populer di Indonesia 


Selain website-website di atas, masih ada jenis website lainnya. Dan 
ini akan terus berkembang seiring berkembangnya teknologi 
pemrograman website dan kreativitas manusia pengguna internet 
serta para developer pengembang program. 


1.3 Kode Sumber Halaman dan Tag HTML 


Tag HTML adalah isi source code Anda. Ini merupakan elemen kode 
yang memberitahukan browser apa yang harus dilakukan dengan 
teks Anda. 


1.31 Melihat Source Halaman 


Bagian inti sebuah web page adalah source code atau kode sumber 
dari sebuah halaman. Karena kode sumber inilah yang menampung 
kode HTML dan menentukan bagaimana sebuah halaman ditam- 
pilkan. 


Kode HTML ini merupakan teks murni yang diketikkan oleh 
pengembang web dan diinterpretasikan oleh browser untuk 
memproduksi web page yang diharapkan oleh pengembangnya. 


Cara untuk melihat source halaman sangat mudah. Caranya hampir 
sama di semua browser. Untuk browser firefox misalnya seperti 
berikut. 


1. Buka halaman di browser. 


2. Kalau sudah terbuka, klik kanan pada halaman kemudian klik 
menu Lihat kode sumber halaman. Atau dalam bahasa Inggris 
View source code. 
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(@ Google - Moria Firetor " Isa 

Berkas Edit Tampilan Riwayat Markah 

Acoooe w—. 8 20 LAN La Kan semuaa ta | 

j3 | 8 htp/Mmnrgoogle.co.id/ Teja Di 
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x Sie sa Lihat Pa Laman 


Lihat Infdfinasi Laman 





Google.co.id tersedia dalam: English Basa Jawa SereenGrab! , 




















Pronram Periklanan | Serha-serhi Gonala | Gooole cam in Enalish. 
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Gambar 1.19 Menu klik kanan untuk membuka kode sumber halaman 


3. Maka terlihat source code yang merupakan kode HTML beserta 
script-script javascript untuk menampilkan tampilan ini. 








D Kode Sumber dari! MPI /www.donaTE co.id/  NGENTA Fireren MN NN La uc aj 


Berkas Ubah Tampilan Bantuan 









html »Khtml jkhead»cmeta http-eguiv-"content-type" 

"text/html: charset-UTF-8"»xtitle»Google«/titler 
€script»window.google-fkEI: "vsFiToCkF4€6nrAeSnK1j", getEI: function (a) (var 
b:while (ass! (a.getAttributess (b-a.getAttribute ("eid"))) )asa.parentNode: 
return 

b| Igoogle.kEI), kEXPI:"17259,28936,30316,30542,31632,31775,31869,31922,324 
20,32532,32534",kCSI: 
te:"17259,28936,30316,30542,31632,31775,31869,31922,32420,32532,32534",ei 
:"vsFiToCkF46nrAeSnK1j",expi: "17259, 28936, 30316, 30542, 31632, 31775,31869,3 I 


1922,32420,32532,32534"),authuser:0,ml:function()t), 

pageState:"#", kHL:"id",time:function () (return (new 

Date) .getTime ()),log:function(a,b,c,e) fvar d-new 

Image, f-google,hsf.1lc,g#f.li,is"",d.onerror- (d.onload- 
(d.onabort-function () delete higJ)|)):higJ-d:if (!cssb.search("e 
Se-1)is"gei-"#google.getEI (e):var j-c| |"/gen 204?atypsisct"tat"& 
cad-"#btit"azxe"#google.time ():d.srcej:f.lisg#1),1c: (J,li:0,j:ten:l, 
1l:function () (google.fl-true),e: function () 
fgoogle.fl-true),b:location.hashs&location.hash!-—"f" bv:21,pm:"p",pl: 
(1,mc:0,3c:0.5,u:"c9c918f0"),Toolbelt:f),y:f),x:function(a,b) 
fgoogle.y(a.id|-f|a,b|:return false)): (function() (var a-google.j: 

| window.onpopstate-function () fa.psc-1):for(var b-0,c: 





| o-Inad", "bow, "INpIT, "is", "PM, "pa", "ACT, "DCM, Mpah", "ph", "Sa", "Sifp", "SIP", | 
| "spf", "spn", "xx" ,"zc","zz") (b#4):) (function(e) fafeJ“function () 
fa.pl.push(f(e,argument3))))) (c))) (): | 


| ip tirei ndari oh enmalrtindar shromas/ Lewindar shrama srre1 NN- 


Baris 1, Kolom 21 
































Gambar 1.20 Tampilan source code HTML dan javascript 


Dengan menggunakan fasilitas view source code, Anda bisa melihat 
di belakang layar tiap halaman web. Karena itulah halaman web 
kode sumber di sisi client selalu terbuka. Sementara source code 
bahasa pemrograman sisi server tetap tidak terlihat. 
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Dengan fasilitas melihat source code ini, Anda bisa berlatih menjadi 
desainer web, karena Anda bisa tahu begini toh source code dari 
website-website lain di internet. 


1.3.2 Tag HTML 


Tiap teks muncul di tengah tanda lebih kecil dan lebih besar 
«teksnya »-. Contohnya seperti berikut: 
«center» 


«body» 


Untuk memberitahukan browser bahwa tag ini sudah berakhir, Anda 
harus menggunakan tag penutup, tag penutup sama seperti tag 
pembuka, hanya saja ada tanda /. Contohnya: 


«/center» 
«/body» 


Tapi ada beberapa tag yang tidak punya tag penutup yang terpisah, 
misalnya: 


cbr/» 


Berikut ini beberapa tag standar di halaman web: 


1. «HTML3: memberitahukan web browser bahwa ini adalah awal 
dari dokumen HTML. 


2. s«HEAD»: memberitahukan web browser bahwa area di sini 
merupakan header. Di dalam header nanti biasanya ada judul. 


3. «TITLE-: memberitahukan web browser bahwa ini adalah judul 
halaman. 


4. «BODY:: memberitahukan web browser bahwa ini adalah awal 
dari konten halaman. Semua yang terlihat di browser terlihat di 
sini. 

5. Untuk mengakhiri halaman, tag yang diperlukan adalah: 


£/ BODY2 
S/HTML2 
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1.4 Sekilas HTML 


Dari sekian banyak tag yang ada. Tag-tag yang wajib ada di setiap 
webpage adalah tag yang mendefinisikan struktur halaman. Tag ini 
wajib hukumnya ada di setiap halaman web. Untuk mendefinisikan 
struktur dokumen HTML, bagian awal dari semua kode harus diawali 
dengan kode «html- dan kemudian ditutup dengan kode «/html-. 


14.1 Mendefinisikan Struktur Halaman 


Jadi, semua kode di antara tag inilah yang dianggap sebagai doku- 
men HTML. Formatnya seperi berikut. 
«html» 


Semua kode di sini, akan dianggap dokumen HTML 
«/html» 


Di dalam tag «html» tersebut yang merupakan dokumen HTML juga 
masih dibagi menjadi 2 tag lagi. Tag pertama adalah «head» dan 
fungsinya sebagai tempat untuk memperkenalkan halaman HTML 
tersebut. Jadi, sekarang dokumen HTML Anda menjadi seperti 
berikut. 


chtml» 
chead» 
Ini informasi mengenai halaman web 
«/head» 
«/htmlz 


Setelah head, bagian kedua adalah «body». Di bagian inilah, Anda 
akan meletakkan teks dan berbagai hiasan serta file multimedia di 
halaman web. Tag «body» ini diletakkan di bawah penutup tag 
chead-. 


chtml» 

chead» 

Ini head 

«/head» 

«body» 

Semua teks body diisikan di sini 
«/body» 

«/html» 
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Mudah bukan, struktur halaman HTML memang sangat simple. 
Bahkan Anda yang baru belajar sekalipun akan langsung mudah 
mempraktikkannya. 


14.2 Menambahkan Title 


Title adalah judul halaman web. Judul ini berbeda dengan nama file 
HTML yang nanti dihasilkan. Karena nama file akan Anda buat saat 
menyimpan dokumen menggunakan editor teks, sementara title 
akan diisikan di dalam tag di kode HTML-nya. 


Untuk mendefinisikan title di dokumen HTML, tag yang dipakai 
adalah tag stitle-. Misalnya untuk membuat judul “Belajar HTML 
yuuk!” maka Anda tinggal membuat kode berikut. 


«title» Belajar HTML yuuk!x/title» 


Nah, tag «title» ini harus diletakkan di dalam tag chead». Sehingga 
misalnya Anda akan membuat halaman kosong namun dengan judul 
di atas, maka tampilannya terlihat seperti berikut. 

chtml» 

chead» 

«title» Belajar HTML yuuk! «/title» 

«/head» 

«body» 

«/body» 

«/html- 


Karena di tag «body» masih kosong, maka halaman ini tidak akan 
terlihat di browser. Yang terlihat hanya teks di tag saja. Berikut ini 
tampilannya jika Anda sudah menyimpan dokumen ke dalam format 
HTML. 








& Belajar HTML yuuk! - Mozilla Firafox BEP 
File Edit View History Bookmarks Tools Help 
- ( an? IL file:///C/Documents and Settings/Administrator/ ka Gl :. 4 
Done fi) 




















Gambar 1.21 Hasil pembuatan halaman yang masih kosong namun 
dengan title yang sudah ada (lihat title bar di kiri atas) 
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1.4.3 Menambahkan Teks ke Body 


Setelah title dari webpage dibuat, barulah Anda dapat memasukkan 
konten dari halaman web. Konten ini diletakkan di antara tag «body- 
dan «/body-. 


chtml» 

chead» 

«title» Belajar HTML yuuk! «/title» 

«/head- 

cbody» 

Teks ini adalah isi dari halaman web. 

Dengan menggunakan tag body, semua apa yang Anda ingin tampilkan 
akan terlihat di browser. 

«/body- 

«/html» 








@ Belajar HTML yuuk! - Mozilla Firefox 13 





File Edit View History Bookmarks Tools Help 


@ » C tar LL file//C/ Documents and V7 - | (Gs / 














Teks ini adalah isi dari halaman web. Dengan menggunakan tag body, semua apa 
yang Anda ingin tampilkan akan terlihat di browser. 


R 

















Gambar 1.22 Isi tag body 


Dari gambar di atas, terlihat bahwa tampilan teks terus disambung 
walaupun di kodenya Anda sudah memisahkan teks menggunakan 
Enter (baris baru). Untuk membuat paragraf, Anda bisa menggu- 
nakan tag cp». 


chtml» 

chead» 

«title» Belajar HTML yuuk! «/title» 

«/head- 

«body» 

sp?Teks ini adalah isi dari halaman web. «/p» 

«p»Dengan menggunakan tag body, semua apa yang Anda ingin 
tampilkan akan terlihat di browser. «/p» 

«/body» 

«/html» 
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(& Belajar HTML yuuk! - Mozilla Firefox ma aa 
File Edit View History Bookmarks Tools Help 


@ Sc Cap LL file///CW Documents and TC? “| GI || / 

















Teks ini adalah isi dari halarman web. 


Dengan menggunakan tag body, semua apa yang Anda ingin tampilkan akan 
terlihat di browser. 

















Gambar 1.23 Konten body menjadi 2 paragraf karena tag xp» 


144 Menggunakan Heading 


Heading adalah bagian dari halaman yang memungkinkan dipakai 
untuk outline. Heading yang digunakan antara heading 1 sampai 
heading 6. Heading dibuat menggunakan tag chl» sampai xh6-. 
Berikut ini contoh penggunaan heading. Walaupun sebenarnya Anda 
bisa membuat layout yang baik tanpa memakai heading, namun 
heading ini nanti juga penting ditinjau dari SEO (search engine 
Optimization). Contoh kode pembuatan halaman untuk heading 
adalah: 


chtml» 

chead» 

«title»Heading, outline untuk halaman webx/TITLE» 

«/head- 

cbody» 

chl»1. Mengenal Komputers/h1l» 

Komputer adalah komponen yang sangat penting peranannya 
ch2»1.1 Komponen Komputer«/h2» 

Ada banyak komponen komputer 

ch3»1.1.1 Penyimpan Datax/h3» 

Ada banyak komponen bisa dikategorikan sebagai storage device. 
ch4»1.1.1.1 Hard Drivex/h4» 

Hard Drive adalah komponen utama penyimpan data yang memakai 
platter 

«/body- 

«/html» 
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& Heading, outline untuk halaman web - Mozilla Firefox 





File Edit View History Bookmarks Tools Help 


-— - G ay 1 file///C/Documents and Settings/Administr 
1. Mengenal Komputer 
Komputer adalah komponen yang sangat penting peranannya 


1.1 Komponen Komputer 

Ada banyak komponen komputer 

1.1.1 Penyimpan Data 

Ada banyak komponen bisa dikategorikan sebagai storage device 
1.1.1.1 Hard Drive 


Hard Drive adalah komponen utama penyimpan data yang memakai platter 


Done 




















Gambar 1.24 Pembuatan outline dengan heading 


1.4.5 Membuat Link 


Sebagai seorang netter, tentu Anda tahu bahwa halaman web 
umumnya selalu memiliki link. Link ini berguna untuk menuju ke 
tempat lainnya di belantara WWW. Apa sebenarnya kode untuk 
membuat link itu? 


Kode untuk membuat link ternyata amat mudah. Anda tinggal 
menggunakan kode ca» untuk membuat link. Tapi penggunaan tag 
ini lebih kompleks daripada pembuatan tag lainnya karena Anda 
harus menentukan url yang akan dituju. Berikut ini format pem- 
buatan link: 


ca href-"alamat url"»Teks tertentux/a» 


URL di sini digunakan misalnya: 


http: //www.yahoo.com 





atau 


http://www.detiknews.com/read/2011/10/06/093844/1216011/10/jual- 
1-tokek-bisa-beli-honda-jazz-nabung-ratusan-juta/ 
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Berikut ini contoh kode simpel untuk memperkenalkan Anda untuk 
membuat link: 


chtml» 

chead» 

stitle»Contoh pembuatan links/title» 

«/head- 

cbody» 

Gile, harga tokek meroket. Lihat aja sumber di «a 
HREF-"http://www.detiknews.com/read/2011/10/06/093844/1216011/10 
/jual-1l-tokek-bisa-beli-honda-jazz-nabung-ratusan-juta"» 
Detiknews inics/a». 



















«/body» 

«/html» 
& contoh pembuatan link - Mozilla Firefox l— (El | Sa 
File Edit View History Bookmarks Tools Help 
@ “ Cc Taj Ik) file:/#/C/Documents and Settin " (Gl - 5 





Gie, harga tokek meroket. Lihat aja sumber di 2 ews ini. 





http/Ammu.detiknews.com/read/2008/10/06/093844/1216011/10/jual-I-tokek-bisa-beli-ho... re) 














Gambar 1.25 Contoh pembuatan link 


1.4.6 Menambahkan Gambar 


Mayoritas halaman web selalu memiliki gambar di dalamnya. 
Dengan gambar, halaman bisa terlihat berwarna dan tampilannya 
lebih bagus. Jika tidak ada gambar, halaman bisa terlihat mem- 
bosankan. Untuk menambahkan gambar, kode HTML pun mendu- 
kungnya. 


Pemasukan gambar diakomodasi oleh tag «img». Berikut ini format 
standar untuk tag «IMG- dalam memasukkan gambar. 


«img src-"lokasi gambar"/» 


27 


Misalnya Anda ingin memasukkan gambar dengan nama file 
“gambar.jpg” dengan lokasi ada di satu folder dari lokasi tempat file 
.html Anda berada. Maka Anda tinggal memasukkan kode: 


«img src-"gambar.jpg"/» 


Contohnya kode berikut: 


chtml- 

chead» 

«title»Contoh Pemasukan Gambar«/title» 
«/head» 

«body» 

«hl»Gambar Kepulauan indonesias/hl» 
cimg src-"gambar.jpg"/s 

«/body» 

«/html» 





8 Contoh Pemasukan Gambar - Mozilla Firefox. B1 5 1 5 


File Edit View History Bookmarks Tools Help 


@G- (ab Xx TA a file:///C/ Documents and Settings/Adm “7 r (G- Google P 


Gambar Kepulauan indonesia 
























































Gambar 1.26 Memasukkan gambar 


14.7 Menambahkan Komentar 


Komentar di HTML cukup mudah dibuat, yaitu tinggal memberikan 
pembuka «!-- dan penutup --». Sangat simpel bukan. Teks-teks yang 
ada di dalam komentar ini tidak akan ditampilkan di halaman 
browser. 


1.5 Memformat Konten di HTML 


Untuk memformat konten, ada beberapa tag yang perlu Anda 
pahami. Tag-tag ini terus berkembang seiring dengan perkembangan 
teknologi browser yang memungkinkan berbagai format baru 
diperkenalkan untuk mendapatkan hasil tampilan dan efek yang 
lebih banyak. 


1.51 Mengatur Style Teks 


Pertama kita akan belajar mengenai bagaimana membuat style dari 
text yang memungkinkan Anda membuat efek tebal, garis miring, 
garis bawah, monospace, dan coret. Efek-efek ini hampir semuanya 
diakomodasi oleh semua browser modern. 


1. Untuk membuat efek tebal, digunakan tag «b» yang merupakan 
singkatan dari bold. 


2. Untuk membuat efek garis miring, digunakan tag «i- yang 
merupakan singkatan dari italic. 


3. Untuk membuat garis bawah, digunakan tag «u- yang meru- 
pakan singkatan dari underline. 


4. Untuk membuat efek monospace, digunakan tag stt- yang 
merupakan singkatan dari typewriter text. 


5. Untuk membuat efek coret, digunakan tag «strike», artinya 
coret. 


Sebenarnya ada beberapa efek style lain dari pemrograman HTML, 
namun apakah style tersebut dikenali atau tidak, akan tergantung 
pada browser-nya. Namun browser modern umumnya mendukung 
5 efek dasar di atas. 


chtml» 

chead» 

stitle»Pemformatan Style Teksx/title» 
«/head» 

«body» 

chl1l» Puisikus/hl» 

cp3 

sb»walau aku tak pergi «/b» 

«/p3 
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cp3 

sistapi jiwaku yang kembalics/i»s 

«/p3 

cp3 

surku tak pulang bukan keinginans/u» 
«/p3 

cp3 

«sttstapi keterbatasan dan kelemahanx/tt» 
«/p3 

cp3 

«sstrikesadakalanya kenyataan berbeda dengan keinginan«/strike» 
«/p3 

diambil dari:puisicintaku.wordpress.com 
«/body» 

«/html» 


Apabila dilihat di browser, tampilan seperti berikut ini. 





& Pemnformatan Style Teks - Mozilla Firefox 













Eile Edit View History Bookmarks Tools Help 


Ga- Ka tap (LI file1///C1/Documents and Settings/Adm V7 - | (Gl- J5 
... 

Puisiku 

walau aku tak pergi 


tapi jiwaku yang kembali 


ku tak pulang bukan keinginan 





tapi keterbatasan dan kelemahan 





diambil daripuisicintaku. wordpress.com 














Gambar 1.27 Pemformatan dengan mengganti style dari teks 
Untuk mengombinasikan format-format teks di atas, Anda tinggal 
meletakkan tag-tag tersebut pada teks yang diinginkan. Misalnya 
untuk membuat format garis miring, tebal dan coret secara bersa- 
maan, Anda dapat menggunakan format berikut: 


Kbpxi»sstrike»Tulisan ini mengalami multi format 
«/strikerx/i»x/bs 


Berikut ini gambar hasil penulisan kode di atas. 
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Gambar 1.28 Hasil penggunaan multiformat 


Selain 5 format dasar di atas, ada juga beberapa format tambahan 
yang masing-masing fungsinya berbeda. Yang pertama adalah «pre» 
di mana fungsinya untuk menggarap pemformatan seperti spasi, tab, 


dan enter yang sebelumnya tidak dikomodasi oleh browser. 


Berikut ini contoh ilustrasi penggunaan tag «pre» yang merupakan 


singkatan dari preformatting. 


chtml» 

chead» 

«stitle»Pemformatan Style Teks Preformatting«/title» 
«/head- 

«body» 

chl»Contoh sebelum Prex/hl» 

Ini baris pertama 

Ini baris kedua 

«/body» 

«/html» 








& Pemformatan Style Teks Preformatting - Mozilla Firefox la 





File Edit View History Bookmarks Tools Help 


(& ” -— ar (LI file1///C/Documents and Set " HIGI- P, 


Contoh sebelum Pre 


Ini baris pertama Ini baris kedua 

















Gambar 1.29 Sebelum digunakan fungsi pre» 


Pada gambar di atas, walaupun di source code, tulisan “Ini baris 
pertama” berbeda baris dengan “Ini baris kedua”. Namun di browser, 
terlihat kedua baris tersebut digabung. Itu karena tidak ada pem- 


formatan cpre». 
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Jika diberi «pre», maka tampilan akan seperti tampilan aslinya di 
kode sumbernya. Jadi, jika ada tab atau enter, akan diterapkan. 
Berikut ini kode jika di bagian body terlihat diberi kode «pre». 


chtml» 

chead» 

«stitle»Pemformatan Style Teks Preformatting«/title» 
«/head- 

«body» 

chl»Contoh sebelum Prex/hl» 
«cpre» 

Ini baris pertama 

Ini baris kedua 

«/pre? 

«/body» 

«/html» 


Setelah menggunakan pre, tampilan pemformatan akan menjadi 
sesuai dengan di source code-nya. Hanya saja, terlihat bentuk tulisan 
menjadi seperti tulisan monospace. 








(@& pemformatan Style Teks Preformatting - Mozilla Firefox 3 er 
Eile Edit View History Bookmarks Tools Help 
@ ” | aj | file:///C/Documents and Set " Gl " 5 


Contoh Setelah Pre 


Ini baris pertama 
Ini baris kedua 











Done ti) 








Gambar 1.30 Tampilan halaman setelah di-pre 


1.5.2 Berpindah Baris 


Untuk membuat tampilan pindah baris, Anda bisa menggunakan 
break. Tag break ini membuat hasil style teks masih bagus, tidak 
seperti «pre» yang membuat tulisan seperti monospace. 


Tag untuk memindahkan teks ke baris berikutnya adalah tag «br/-. 
Tulisan br adalah singkatan dari break atau yang dimaksud adalah 
line break. Apa perbedaan break dengan tag «p» untuk pembuatan 
paragraf? 
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Jawabnya adalah paragraf akan selalu memiliki jarak dengan 
paragraf di bawahnya. Adapun pemindahan baris dengan break tidak 
memberikan jarak dengan bawahnya. Jadi dengan break, tulisan 
teks masih akan dianggap satu paragraf. 


Berikut ini contoh sebelum adanya break dan hanya menggunakan 
paragraf. 


chtml» 

chead» 

stitle»Sebelum digunakan Breakx/title» 
«/head- 

«body» 

chl»Sebelum Breaks/hl» 

cp3 

Suatu waktu di suatu masa 
tersebutlah kisah seorang dara 
«/p3 

cp3 

Dara elok berparas rembulan 
disayang dimanja oleh Sang Raja 
«/p3 

cp3 

Dara cantik sudah remaja 

tibalah waktu mencari pendamping 
«/p3 

«/body» 

«/html» 





& Sebelum digunakan Break - Mozilla Firefox Asma 


File Edit View History Bookmarks Tools Help 


-- ii Cc ah LI file:///C:/Documents and Set 17 Gl- | P, 
Sebelum Break 


Suatu waktu di suatu masa tersebutlah kisah seorang dara 





Dara elok berparas rembulan disayang dimanja oleh Sang Raja 


Dara cantik sudah remaja tibalah waktu mencari pendamping 

















Gambar 1.31 Sebelum diterapkan break 
Adapun berikut ini merupakan kode setelah di dalam paragraf diberi 


tag «br/-» untuk memisahkan baris. Dari tampilan baru ini, Anda juga 
akan dapat melihat perbedaan antara tag «p» dan tag «br». 
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chtml» 








chead» 
stitle»Setelah digunakan Breakx/title» 
«/head- 
«body» 
chl»Setelah Breaks/hl» 
cp3 
Suatu waktu di suatu masa 
cbr/s 
tersebutlah kisah seorang dara 
«/p3 
cp3 
Dara elok berparas rembulan 
cbr/s 
disayang dimanja oleh Sang Raja 
«/p3 
cp3 
Dara cantik sudah remaja 
cbr/s 
tibalah waktu mencari pendamping 
«/p3 
«/body» 
«/html» 
& setelah digunakan Break - Mozilla Firefox BE 
File Edit View History Bookmarks Tools Help 
@ 3 C aj |) file:///C1/Documents and Settings/Admi 17 - | |(GI- J5 
Setelah Break 
Suatu waktu di suatu masa 
tersebutlah kisah seorang dara 


Dara elok berparas rembulan 
disayang dimanja oleh Sang Raja 


Dara cantik sudah remaja 
tibalah waktu mencari pendamping 


Done ) 














Gambar 1.32 Setelah diterapkan break 


1.5.3 Memasukkan Garis Horizontal 


Garis horizontal adalah garis yang membujur secara horizontal di 
halaman web. Ini dapat dimasukkan dengan menggunakan tag «hr/» 
di kode Anda. HR ini adalah singkatan dari horizontal ruler. Garis 
horizontal ini adalah salah satu teknik yang bisa dipakai untuk 


memisahkan atau mempartisi konten halaman web Anda. 
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Langsung saja, berikut ini contoh kode untuk memasukkan garis 


horizontal: 


chtml» 

chead» 

stitle»Horizontal Linex/title» 
«/head» 

«body» 

«ch1l»Puisi dengan HR«/hl» 

chr/s 


hidup ini sesungguhnya mudah dan sederhana jika anda tidak 


banyak tuntutan. 


karena sesungguhnya hidup ini penuh dengan kebahagiaan 
jika anda tak dikuasai oleh ilusi,ambisi dan keakuan 


chr/» 
«/body» 
«/html» 


Jika dibuka di browser, tampilannya terlihat seperti berikut, ada 


bagian horizontal ruler di atas dan bawah teks. 





& Horizontal Line - Mozilla Firefox 


18 jet 





File Edit View History Bookmarks Tools Help 


@ "Cc ay | 9 |fle///CvDocuments and Settings/2 
Puisi dengan HR 


"IG 5 





dan keakuan 


hidup ini sesungguhnya mudah dan sederhana jika anda tidak banyak tuntutan. karena 
sesungguhnya hidup ini penuh dengan kebahagiaan jika anda tak dikuasai oleh ilusi,ambisi 











Done 








tie) 








Gambar 1.33 Contoh penggunaan Horizontal Line 


1.54 Membuat Aneka Macam List 


Sering kali di sebuah website, diperlukan pembuatan daftar atau list. 
Daftar ini ada berbagai macam variasinya di pemrograman HTML. 
Yaitu ordered list, unordered list dan definition list. 


Untuk membuat daftar berurutan Anda perlu 2 kode: 


e Semua list dibuka dengan dengan tag «ol» dan ditutup 
dengan tag «/ol-. Tag OL ini adalah singkatan dari ordered 


list. 
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Setelah 


Tiap item dari list yang ada dibuka dengan tag «lis dan 
ditutup dengan tag «/li». Ll ini adalah singkatan dari list item. 


list bernomor sebelumnya, Anda dapat juga bisa membuat 


jenis yang kedua, yaitu list bullet. Yaitu berjenis unorderd list. Nama 
bullet ini disebabkan browser menampilkan ikon bulat-bulat di 
sebelah kiri tiap list item yang dimasukkan. Kodenya hampir mirip 


dengan 


Berikut 
list: 


chead» 


ordered list, di mana: 


Semua list dibuka dengan tag «ul» dan ditutup dengan tag 
«/ul-. Tag UL ini adalah singkatan dari unordered list. 


Tiap item dari list dibuka dengan tag «li- dan ditutup dengan 
tag «/lis. 


ini kode yang mengandung tipe ordered list dan unordered 


stitle-Unordered dan Orderd Listx/title» 


«/head» 
«body» 


chl»Daftar Komponen PCx/hl» 


culz 


«dlisCasex/li» 
«li»Mother Board «/lis»s 


«dli»CPU 
«lisRAM 


(Central Processing Unit) «/li» 
(Random Access Memory)«/li» 


«dli»Hard Disk Drives/li» 
«sli»Video Display Adapter«/li» 
cli»Monitor «/lis 

«sli»Input Devices/li» 
«li»Printer«/li» 


aula 


chl1l» Cara merakit PCx/hl» 


colz 


«dli»Pasang Prosesor ke Motherboardx/li» 
«dli»Pasang Memory ke Motherboardx/li»s 
«dli»Pasang Motherboard ke Casings/li» 
«dli»Pasang Powersupply dan Kabelnyas/li» 
«dli»Pasang kabel controller depan«/liz 
«dli»Pasang hard drive dan drive optiks/li» 
«lisOke, selesais/li» 





c/ol» 
«/body» 
«/html- 


Jika dilihat di browser, tampilan list ini terlihat seperti berikut. 
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(@ Unordered dan Orderd List - Mozilla Firefox Ao) 


File Edit View History Bookmarks Tools Help 
Ga- — 27 19 |file/M/CyDocuments and Settings/Administrator/Desk V7 » | ((GI- 7 


Daftar Komponen PC 


@ Case 

@ Mother Board 

« CPU (Central Processing Unit) 

& RAM (Random Access Memory) 
@ Hard Disk Drive 

@ Video Display Adapter 

@ Monitor 

@ Input Device 

@ Printer 


| Cara merakit PC 


Pasang Prosesor ke Motherboard 
Pasang Memory ke Motherboard 
Pasang Motherboard ke Casing 
Pasang Powersupply dan Kabelnya 
Pasang kabel controller depan 
Pasang hard drive dan drive optik 
Oke, selesai 


DAOUA WN 

















| Done Pe 








Gambar 1.34 Hasil tampilan kode unordered dan ordered list 
di browser 


Tipe list ketiga adalah definition list. Tipe ini fungsinya memformat 
teks dalam bentuk seperti kamus, sehingga Anda dapat menuliskan 
kata dan mendefinisikan artinya. Jadi, tipe ini memiliki 2 bagian, 
yaitu istilah dan arti dari istilah tersebut. Namun tag-nya ada tiga, 
yaitu: 


e Kata yang akan dijelaskan menggunakan tag «dt» yang 
merupakan singkatan dari definition term. 


e Kata penjelasannya menggunakan tag «dd» yang artinya 
definition description. 


e Semua tag ini diawali oleh tag «dl- yang merupakan 
singkatan dari definition list. 


Contoh kode HTML yang menampilkan definition list ini adalah: 


chead» 
stitle»Definition Listx/title» 
«/head- 
«body» 
chl» Definisi Komponen PCx/hl» 
cal» 
cdt-Case «/dt- 
«dd»Tempat untuk menyimpan semua komponen komputer«/dd» 
cdt»Mother Boardx/dt» 
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sdd»Tempat untuk menancapkan semua komponen dan 

perkabelan« / da» 
«sdtsCPU (Central Processing Unit)«x/dt» 

cddz Otaknya komputers/dd- 
sdtsRAM (Random Access Memory) «/dt- 

«dd»Tempat penyimpanan data sementarax/dd» 
sdt»Hard Disk Drivex/dt» 

«dd»Tempat penyimpanan data permanen«/dd» 
«cdt»Video Display Adapter «/dt» 

scdd-Tempat me-render gambar«/dd» 
«cdt»Monitor«/dt» 

«dd»Tempat menampilkan gambar«/dd» 
sdt»Input Devicex/dt» 

cdd-Tempat memasukkan masukan ke komputers«/dd- 





c/Aalz 
«/body» 
«/html» 


Jika dilihat di browser, terlihat webpage seperti ini. 





@ oefinition List - Mozilla Firefox SES) 





Eile Edit View History Bookmarks Tools Help 


@ SG ar | L3 |file///C/Documents and Settings/Administrator/DesI 17 - | |(GI- ji 


Definisi Komponen PC 


Case 
Tempat untuk menyimpan semua komponen komputer 
"Mother Board 
Tempat untuk menancapkan semua komponen dan perkabelan 
CPU (Central Processing Unit) 
Otaknya komputer 
RAM (Random Access Memory) 
Tempat penyimpanan data sementara 
Hard Disk Drive 
Tempat penyimpanan data permanen 
Video Display Adapter 
Tempat me-render gambar 
Monitor 
Tempat menampilkan gambar 
Input Device 
Tempat memasukkan masukan ke komputer 


Done tj 























Gambar 1.35 Webpage yang berisi kode untuk definition list 


List-list di atas dapat juga dikombinasikan. Caranya sama seperti 
ketika meng-combo-kan style pada teks. Jadi, Anda hanya perlu 


memainkan peletakan tag di dalam tag list lainnya. 


cals 

«sdts»Komponen-komponen komputer yang penting:«/dt» 
cdds 

List-nya adalah seperti berikut: 

«ulz 

«li»Monitors/li»s 

«dli»Sistem operasi«s/li» 
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slisCPUsx/li» 
c/ul» 
/ AA» 
c/dlz 


Jika dilihat di browser, tampilan unordered list akan ada di dalam 
bagian definition description. Karena tag «ul- ada di dalam tag «dd-. 


1.5.5 Membuat Link Lanjutan 


Di subbab sebelumnya, Anda sudah belajar membuat link. Sebe- 
narnya pemformatan link ada beberapa variasi. Pertama adalah tipe 
link internal. Ini merupakan tipe link di mana halaman yang 
mengandung link dan halaman yang dituju terletak pada satu domain 
dan letaknya bisa direlatifkan. 


Mislanya Anda punya 2 halaman: 


http://www.domain-anda.co.cc/index.html 





dan Anda ingin membuat link dari halaman index.html di atas untuk 
menuju ke: 


http://www.domain-anda.co.cc/bukutamu.html 





Dari URL-nya, kedua halaman tersebut terletak di satu folder. Ini 
memungkinkan Anda membuat email dengan menentukan alamat 
relatif dari halaman kedua melalui halaman pertama. Halaman kedua 
bukutamu.html tersebut dapat dispesifikasikan lokasinya dengan 
menggunakan nama file-nya saja, karena lokasinya satu folder. Jadi, 
Anda bisa menggunakan kode berikut: 


Ayo isi buku tamu di «ca href-"bukutamu.html"»Buku tamu gwx/A» 


Jenis lain adalah link internal. Untuk membuat link internal, Anda 
harus membuat dahulu anchor di dalam website Anda. Tempat yang 
di-anchor ini nanti dapat diacu dengan link. Jadi, anchor fungsinya 
adalah “menandai tempat” sehingga bisa diacu oleh link. 


Misalnya Anda ingin memberi nama di bagian tertentu di webpage 
dengan nama “iklan”. Maka Anda membuat nama anchor seperti 
berikut: 


«a name-"iklan"»Kotak iklan«/a» 
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Maka link ke kotak iklan tersebut dapat dibuat dari halaman yang 
sama (misalnya dalam bentuk daftar isi halaman tersebut), dengan 
menggunakan kode HTML seperti berikut: 


ca href-"#iklan"»Kotak Iklan«/a» 


Jika link itu dibuat dari halaman lain, maka Anda bisa menggunakan 
kode HTML seperti berikut: 


ca href-"http://www.domain- 
anda.co.cc/file tertentu.htm#tiklan"»Lihat kotak iklannya di 
sinixs/a? 


1.5.6 Membuat Link Email 


Sering kali Anda perlu untuk membuat link yang memungkinkan 
user dapat langsung mengklik untuk mengirimkan email ke account 
email Anda. Ini bisa juga langsung diakomodasi oleh HTML. Namun 
hati-hati, teknik ini juga bisa mendorong robot dari spammer untuk 
menuju ke website Anda. Karena itu jangan gunakan kecuali jika 
terpaksa. 


Untuk membuat link langsung ke email, format kode yang dapat 
Anda gunakan seperti berikut: 


ca href-"mailto:alamatemail@provider.com"»Klik untuk kirim email 
ke sayas/A? 


Implementasinya tinggal Anda mengklik link tersebut, maka terbuka 
software mail client Anda, seperti Outlook atau Thunderbird dan 
kemudian Anda bisa mengirim email. 





@ Kirim email - Mozilla Firefox 3 jane 


File Edit View History Bookmarks Tools Help 
@ -M S3 tap 1) filei///C/Documents and Settings/Adminis - UIGI- 5 


Klik untuk kirim email 

















Klik untuk kirim email ke Haya 











mailto:alamatemailOprovider.com 





Gambar 1.36 Link yang memungkinkan pengiriman email 
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1.6 Menggunakan Gambar di Halaman 


Anda sudah mengetahui bahwa memasukkan gambar dapat diako- 
modasi dengan kode berikut: 


«img src-"nama file gambar"» 


Kode src di atas adalah singkatan dari source. Sekarang kita akan 
belajar beberapa utak-atik sederhana tentang gambar di halaman 
web. 


1.6.1 Mengatur Alignment Teks dan Gambar 


Dalam prakteknya, gambar sering kali disandingkan dengan teks. 
Untuk itu Anda perlu mengatur bagaimana alignment teks terhadap 
gambar. Caranya dengan menambahkan tag calign» di dalam tag 
simg». Format kodenya seperti berikut: 


«img src-"nama file gambar" align-top (middle | bottom» 


Maksud tulisan toplmiddlelbottom adalah Anda bisa menentukan 
apakah alignment akan top (atas), middle (tengah) atau bottom 
(bawah). Langsung saja, berikut ini contoh alignment teks beserta 
tampilannya jika dilihat di browser. 


chtml- 
shead» 
«titlesAligning Text dan Gambar«/title» 
c/head» 
sbody» 
«chl» Contoh Alignment Teks dan Gambar «/hl» 
cp3 
cimg src-"makanan.jpg" align-top /»Makanan yang enak sekali. 
«/p3 
sP» 
cimg src-"makanan.jpg" align-middle /»Makanan tuna 
mentah.«/p» 
«ps 
cimg src-"makanan.jpg" align-bottom /»Dimasak model 
sushi.«/p» 
«/body» 
c/html» 


4 





& Sligning Text dan Gambar - Mozilla Firefox lola. 


| File Edit Views History: Bookmarks Tools: Help: 


@ SG tap 9 file:///C Documents and Settings/Administrator/D 17 - | (Gs J 


Contoh Alignment Teks dan Gambar 








akanan yang enak sekali. 








akanan tuna mentah. 


imasak model sushi 








Done Peka 

















Gambar 1.37 Alignment teks dan gambar, dalam bentuk top, middle 
dan bottom 


1.6.2 Memberikan Teks Alternatif 


Di awal-awal kemunculan bahasa HTML, tidak semua browser 
mampu menampilkan gambar. Karena itu bahasa HTML meng- 
akomodasi teks alternatif yang memungkinkan browser yang tidak 
dapat menampilkan gambar tersebut untuk menampilkan teks. 


Sekarang walaupun hampir semua browser mampu menampilkan 
gambar, namun teks alternatif ini juga masih tetap berguna. Karena 
diperlukan dalam kampanye SEO (search engine optimization). Alt 
ini biasanya diisi dengan kata-kata kunci berkaitan dengan gambar 
yang ditampilkan. 


Formatnya seperti berikut: 


cimg src-"rumah.jpg" alt-"gambar rumah idamanku, rumah, 
properti"» 


Jika browser dibuka, maka tulisan alternatif ini terlihat di kotak 
gambar jika seandainya gambar gagal dibuka. Dan jika pointer 
mouse sedang berada di atas (hover) gambar. 
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1.6.3 Membuat Link Gambar 


Gambar memang multifungsi. Tidak cuma sebagai media untuk 
mempercantik dan menghias halaman serta menambah ilustrasi di 
halaman. Namun juga bisa dipakai untuk membuat link. Link yang 
berupa gambar akan lebih menarik pengunjung. Terutama jika 
gambarnya menarik dan senada dengan informasi yang akan 
ditampilkan pada gambar. 


Tekniknya sebenarnya simpel. Hanya merupakan gabungan dari tag 
ca» dan di tengahnya ada tag «img» untuk menampilkan gambar. 
Jadi, gambarnya menjadi link. Formatnya seperti berikut: 


«a href-"url dari link"»ximg src-"file gambar"»x/a» 


Contohnya kode berikut: 


chtml- 
«head» 
stitleslink dengan gambar«/title» 
«/head» 
sbody» 

chl1» klik pada gambar untuk menuju halaman lain «/hl» 

«a href-"http://detikfood.com"»ximg src-"makanan.jpg" /» 

c/as 
«/body» 

«/html» 


Berikut ini tampilannya saat dilihat di browser. 




















@ Link dengan Gambar - Mozilla Firefox Arc 
File Edit View History Bookmarks Tools Help 
Ga ” | ar Il ) file:///C/Documents and Settings/As hi (GI " Ps 


Klik pada gambar untuk menuju 
halaman lain 

















| http//detikfood.com/ 





Gambar 1.38 Link dengan gambar 
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1.7 Membuat Tabel 


Tabel adalah komponen yang cukup penting di halaman web. Selain 
untuk membuat tabel untuk menampilkan data, tabel di sini juga 
penting untuk me-layout halaman. Misalnya saat menampilkan form 
untuk menerima input dari pengguna. 


Jadi, fungsinya yang secara langsung memang tidak terlalu penting 
(seperti membuat tabel dalam arti eksplisit), tapi karena tabel 
mampu digunakan untuk membuat tampilan form menjadi teratur, 
maka tabel ini akan sering sekali ditemui dalam membuat halaman 
web. 


Untuk membuat tabel, tag pembungkusnya adalah tag xtable-. Di 
tabel, ada 2 istilah yang perlu diperhatikan, yaitu row (artinya baris) 
yang dibuat dengan tag str». Dan tiap baris ini akan terdiri atas sel- 
sel data/table data yang dibuat dengan tag «td». 


Dan sel-sel di tabel ini kemudian dapat diisikan dengan berbagai 
macam data, seperti teks, gambar, list, paragraf, form, ruler, bahkan 
bisa dimasuki lagi tabel di dalamnya. Berikut ini contoh kode untuk 
membuat tabel di HTML. 


chtml» 

chead» 

stitlestabel di htmlx/title» 

«/head» 

«body» 

«chl» tabel, bagian penting dari kode html «/hl» 
«table border-"1"» 

ctrs 

ctd»baris 1, kolom 1x/td» 

ctd»baris 1, kolom 2x/td» 

ctd»baris 1, kolom 3x/td» 

c/tr 
ctrs 
ctd»baris 2, kolom 1x/td» 
sctd»baris 2, kolom 2x/td» 
ctd»baris 2, kolom 3x/td» 
Sar 
ctr3 
ctd»baris 
ctd»baris 
ctd»baris 
c/tr 
«/table» 
«/body» 
«/html- 


kolom 1«/td» 
kolom 2x/td» 
kolom 3x/td» 





Www 
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Jika dilihat di browser, tampilannya seperti berikut ini. 





& Tabel di HTML - Mozilla Firefox AGS 


File Edit View History Bookmarks Tools Help 





@ sc Cap 1 LX Hile///C/Documents and Settings/Ad Y7 - | |(GI- 5 


Tabel, bagian penting dari kode HTML 





baris 1, kolom 1 (baris 1, kolom 2 (baris 1, kolom 3 


baris 2, kolom 1 (baris 2, kolom 2 (baris 2, kolom 3 

















baris 3, kolom 1 (baris 3, kolom 2 (baris 3, kolom 3 




















Gambar 1.39 Tabel 3 baris dan 3 kolom 


Saat membuat tabel di atas, Anda menggunakan atribut border. 
Atribut tersebut merupakan atribut yang digunakan untuk me- 
nentukan lebar batas dari tabel. Jadi, jika tabel hanya digunakan 
untuk membantu me-layout peletakan gambar, teks, atau form, 
maka border tidak digunakan dan tabel hanya dibuka dengan 
«table» saja. 


Anda juga bisa memakai heading untuk tiap bagian atas dari tabel 
dengan menggunakan tag «th» di dalam baris atau tag «tr- yang 
pertama. 


Format untuk membuat heading di tabel adalah seperti ini. 


SET 

sth»Heading pertamax/th» 

«th»Heading di kolom keduax/th» 
«sth»Heading di kolom ketiga, dstx/th» 
Sr 


kakak 


45 


